<template>
  <div class="search">
    <form action="/">
      <van-search
        v-model="keyword"
        placeholder="请输入车队名称/手机号/主卡号"
        @search="onSearch"
        @cancel="onCancel"
      >
        <!-- 自定义右侧按钮内容 -->
        <div slot="action" @click="onScan">
          <van-icon name="scan" />
        </div>
      </van-search>
    </form>
    <!-- 暂时没有加入任何车队的文本提示 -->
    <div class="text-nocar" v-if="carList.length === 0">
      {{ text }}
    </div>

    <!-- 车队卡列表 -->
    <CarList :carList="carList" v-if="carList.length > 0"></CarList>
    <!-- loading -->
    <van-loading type="spinner" color="white" v-show="loading" />
  </div>
</template>
<script>
import Vue from "vue";
import { mapActions } from "vuex";
import wx from "weixin-js-sdk";
import { Search, Icon, Loading } from "vant";
import CarList from "./carList.vue";

Vue.use(Search);
Vue.use(Icon);
Vue.use(Loading);
export default {
  head() {
    return {
      title: "我的车队"
    };
  },
  components: {
    CarList
  },
  beforeCreate() {
    console.log("创建");
  },
  data() {
    return {
      loading: false,
      keyword: "",
      carList: [], // 主卡列表
      text: "暂时还未加入车队，请点击上方输入框申请加入车队"
    };
  },
  created() {
    console.log(this, "搜索车队");
  },
  mounted() {
    // this.handelGetSdkConfig();
  },
  methods: {
    ...mapActions({
      getSdkConfig: "authen/getSdkConfig"
    }),
    // 获取签名：
    handelGetSdkConfig() {
      this.getSdkConfig({
        jsApiList: ["checkJsApi", "scanQRCode"]
      }).then(res => {
        wx.config(res); // 注入配置信息
        wx.error(error => {
          console.log(error);
        });
      });
    },
    // 用户点击键盘上的 搜索/回车 按钮触发
    onSearch() {
      this.getParentCardList();
    },
    // cancel 事件在用户点击搜索框右侧取消按钮时触发
    onCancel() {
      console.log("取消搜索");
    },
    // 根据关键字获取车队卡信息列表
    async getParentCardList() {
      const params = {
        enterpriseId: 174, // this.enterpriseId
        keyword: this.keyword
      };
      const res = await this.$axios.$get(
        `/fleetCard/enterpriseId/${params.enterpriseId}/keyword/${params.keyword}`
      );
      this.carList = res.data;
      if (this.carList.length === 0) {
        this.text = "没有查询到任何车队卡，请确认是否已经创建了车队卡";
      }
    },

    // 扫一扫
    onScan() {
      console.log("扫一扫");
      wx.scanQRCode({
        needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
        success: function(res) {
          console.log("扫描结果", res);
          var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
.search {
  padding: 10px;
  // 扫描框样式
  .van-search {
    background-color: #f7f8fa;
    font-size: 0.4rem;
    padding: 5px 10px;
    div {
      line-height: unset;
      i {
        vertical-align: middle;
        font-weight: bold;
      }
    }
    .van-search__action {
      font-size: 0.38rem;
    }
  }

  // 没有加入任何车队文本提示
  .text-nocar {
    text-align: center;
    font-size: 0.32rem;
    letter-spacing: 1px;
    margin-top: 2rem;
  }

  // loading
  .van-loading {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    bottom: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.9;
  }
}
</style>
